<template>
    <div >
     <form >
        <div class="contain">
            <div class="row">
                <labelc class="name">意见反馈</labelc>
            </div>
            <div class="row text">
                <div>
                    <!-- textarea多行文本框,将多行文本框的数据保存到feedback里 -->
                    <!-- maxlength最大输入长度 -->
                    <!-- placeholder提示信息 -->
                    <textarea v-model="feedback" 
                    maxlength="200"
                     placeholder="点击输入"
                     class="input" 
                    >
                     </textarea>
                     <!-- word_count实时输入的字数 -->
                     <label class="word-count">{{word_count}}/200</label>
                </div>
            </div>

            <!-- 截图 -->
            <div class="row">
              <div>
                <label class="name">相关截图(选)</label>
                <!-- 图片数量 -->
                <label class="img-count">{{img_count}}/2</label>
              </div>

               <div class="feedback-image">
                <div class="feedback-image-box">
              <!-- item每一个链接项 -->
              <!-- index当前遍历到的图片索引，第一张图片索引是0，第二张是1 -->
              <label v-for="(item,index) in src" :key="index">
                 <div class="feedback-image-item" :src="item">
                <image :src="item" class="feedback-image-icon"></image>
						<!--  -->
						<img class="iconfont feedback-image-delete" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/shanchu.png"
						@click="deleteImgHandle(index)">
						
					</div>
                

                <!-- <text class="delete1" 
						@click="deleteImgHandle(index)">&#xe695;</text> -->

              </label>
              <label v-if="img_count<2" @click="uploadPicture">
                <img class="add-img" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/tianjia.png">
             
              </label>
            </div>
             </div>
            </div>

            <!-- 微信号 -->
            <div class="row">
              <div class="name">
                微信号（选）
              </div>
              <input  
              v-model="wechat"
              maxlength="20"
              placeholder="详细联系，请填手机或微信号"
              class="wechat-input">
            </div>
            </div>
            <button class="btn1" @click="submmit"  >提交</button>
            </form> 
    </div>
</template>

<script>
import {post,showModel} from '@/utli'

export default {
  
    data(){
        return{
            feedback:"",//输入的反馈内容
            word_count:0,//实时输入的字数
            src:[],
            img_count:0,
            wechat:"",
            currentIndex:"0",

            
        }
    },
    // 实时查看输入的字数

    watch:{
      //feedback()是函数
        feedback(){
          // this指当前的vue实例对象
            this.word_count=this.feedback.length
            console.log("反馈内容",this.feedback)
        },
        src(){
          this.img_count=this.src.length
        }
    },
    methods:{
      //这里面的是方法
      // 添加图片
      uploadPicture(){
       
        // 用that代表vue的实例对象
        let that=this
        //微信自带小插件
        wx.chooseImage({
          // count上限两张
          count: 2,
          sizeType: ['original','compressed'],
          sourceType: ['album','camera'],
          success (res){
            // tempFilePaths可以作为img的src属性显示图片
            // 这里用res.是因为这是微信的接口方法
            const tempFilePaths = res.tempFilePaths
          // 用that来调用src这个对象
          that.src.push(tempFilePaths)
          console.log("图片路径",that.src)
          }
      })
    },

   deleteImgHandle(currentIndex){
				console.log("[删除图片]")
			    this.src.splice(currentIndex,1)
				console.log(this.src)
			},

    // 异步加载
    async submmit(){
      
      if(this.word_count>0){
        
          const data={
        feedback:this.feedback,
        // join字符串的形式
        src:this.src.join(","),
        wechat:this.wechat,
        openid:wx.getStorageSync('userinfo').openId,
        
      }
    try{
       const res = await post('/weapp/createfeedback',data)
       console.log("从后端返回的执行正确的信息是:",res)
      //  console.log("从后端返回的执行正确的信息是:",data)
       
      showModel('提交成功',"反馈成功")


        this.feedback="",
        this.src=[],
            this.wechat=""

      //  wx.redirectTo({
      //   // 绝对路径前要加 /
      //   url: "/pages/user/main",
      // });
     
      // 成功后返回首页
      // wx.reLaunch({
      // url: '../index/main' })
    //  wx.reLaunch({
    //     // 绝对路径前要加 /
    //     // url: "/pages/user/main",
    //   });
     
    //  this.onReady()
    }catch(e){
      console.log("从后端返回的执行错误的信息是",e)
       showModel('提交失败',"服务器出错")
    }
      }else{
        showModel("提交失败","反馈不能为空")
      }
      
    }
  }
}
</script>

<style lang="scss">

.contain{
  background:#FFFFFF;
  font-size:15px;
  .text {
    height: 110px;
  }
  .row{
    border-bottom: 1px #E8E8E8 solid;
    padding: 5px 15px;

     .feedback-image{
		display: flex;
		flex-direction: column;
	
     .add-img {
      width:80px;
      height:80px;
    }
    .feedback-image-box{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 2px;
			.feedback-image-item{
				border: 1px solid #70737F;
				border-radius: 8px;
				width: 66px;
				height: 66px;
				margin-right:10px;
			margin-top:7px;
				display: flex;
				background-color: #FFFFFF;
				position: relative;

				.feedback-image-icon{
					border-radius: 8px;
					width: 100%;
					height: 100%;
					display: block;
				}
				.feedback-image-delete{
					color: #ff0000;
					position: absolute;
					top: -5px;
					right: -5px;
//
					width:15px;
      		height:15px;

				}
			}
			
		}
    }
    .name {
      width:80%;
      height: 40px;
      line-height: 40px;
    }
    .input {
      width:100%;
      height:85px;
      font-size:14px;
      padding-top:5px;
    }
    .word-count {
      float:right;
      color: #808080;
    }
    .img-count {
      float:right;
      line-height: 40px;
      color: #808080;
    }
   
    .wechat-input{
      font-size:14px;
    }
  }
}  
.btn1 {
  margin:20px auto;
  width:90%;
  border-radius: 5px;
  background:#EA5149;
  font-size:16px;
  color:#FFFFFF;
  font-weight:bold;
}





</style>





